<script lang="ts" setup>
defineProps({
  title: {
    type: String,
  },
  titleStyle: {
    type: Object,
  },
});
</script>
<template>
  <div class="bg p-5 w-full">
    <div class="flex flex-wrap items-center">
      <div class="flex">
        <span class="mr-1">
          <slot name="icon" />
        </span>
        <h3 class="text-slate-400 mb-0 font-bold" :style="titleStyle">
          {{ title }}
        </h3>
      </div>
      <span class="ml-1 my-3">
        <slot name="tip" />
      </span>
    </div>
    <slot name="content" />
  </div>
</template>
<style lang="scss" scoped>
.bg {
  background-color: #f5f7fa;
}
</style>
